<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>更新页面</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <style>
            .bottom {
                width: 100%;
                position: relative;
                bottom: 0px;
                left: 0px;
                height: 50px;
                line-height: 50px;
                background-color: #F8F8F8;
                border-top: 1px solid #eee;
            }
            .selectClass{
                box-shadow: 3px 3px 6px rgba(85, 154, 227, 0.4);
                background-color: #1e9fff;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="layui-card">
            <div style="display: flex;flex-direction: row">
                <label style="width: 60px;text-align: center;font-size: 14px;font-weight: 600">已选择</label>
                <label style="width: 90%;border-top: 1px solid #d5d1d1;margin-top: 10px;"></label>
            </div>
            <div class="selected_item" style="display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;margin: 10px;">
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief">
                <span class="layui-breadcrumb" lay-separator="|"></span>
                <ul class="layui-tab-title" style="background-color: #f9f9f9">
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div style="display: flex;flex-direction: row">
                            <label style="width: 60px;text-align: center;font-size: 14px;font-weight: 600">人物</label>
                            <label style="width: 90%;border-top: 1px solid #d5d1d1;margin-top: 10px;"></label>
                        </div>
                        <div style="display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;margin: 10px;">
                            <div style="border: 1px solid #d5d1d1;padding: 5px;margin: 0 15px 10px 0;">wewqeqw</div>
                            <div style="border: 1px solid #d5d1d1;padding: 5px;margin: 0 15px 10px 0;">wewqeqw</div>
                            <div style="border: 1px solid #d5d1d1;padding: 5px;margin: 0 15px 10px 0;">wewqeqw</div>
                        </div>

                    </div>
                    <div class="layui-tab-item">内容2</div>
                </div>
            </div>
        </div>
        <form class="layui-form" action="">
            <div class="bottom" >
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">确定</button>
                </div>
            </div>

        </form>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/functions.js"></script>
        <script src="/app/admin/admin/js/md5.js"></script>
        
        <script>
            let selectData = [];

            // 相关接口
            const SELECT_API = "/app/admin/plan/role/selecttaglist" + location.search;

            let selectTags = parent.$('input[name="select_tag"]').val();
            if(selectTags){
                selectData = JSON.parse(decodeURIComponent(selectTags));
            }else{
                selectData = [];
            }
            if(selectData.length>0){
                let html = '';
                layui.$.each(selectData,function (i,v) {
                    html +='<div class="selectClass" style="border: 1px solid #d5d1d1;padding: 5px;margin: 0 15px 10px 0;" onclick="selectTag(this,\''+v.zh+'\',\''+v.en+'\')">'+v.zh+'('+v.en+')</div>';
                });
                layui.$('.selected_item').html(html);
            }

            layui.use(['layer', 'form', 'element', 'tab', 'code','jquery'], function() {
                var layer = layui.layer,
                    tab = layui.tab,
                    $ = layui.jquery,
                    form = layui.form;

                $ = layui.$;
                $.ajax({
                    url: SELECT_API,
                    dataType: "json",
                    async:true,
                    headers: get_header({}),
                    success: function (res) {
                        // ajax返回失败
                        if (res.code) {
                           return layui.popup.failure(res.msg);
                        }

                        let htmlUl = '';
                        let htmlContent = '';
                        let k=1;
                        $.each(res.data,function (i,v) {
                            let isclass = '';
                            let showclass = '';
                            if(k==1){
                                isclass = 'layui-this';
                                showclass = 'layui-show';
                            }
                            htmlUl += '<li class="'+isclass+'">'+i+'</li>';

                            htmlContent += '<div class="layui-tab-item '+showclass+'">\n';
                            $.each(v,function (ii,vv) {
                                htmlContent +=    '<div style="display: flex;flex-direction: row">\n' +
                                    '                            <label style="width: 60px;text-align: center;font-size: 14px;font-weight: 600">'+ii+'</label>\n' +
                                    '                            <label style="width: 90%;border-top: 1px solid #d5d1d1;margin-top: 10px;"></label>\n' +
                                    '              </div>\n' +
                                    '              <div style="display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;margin: 10px;">';

                                $.each(vv,function (iii,vvv) {
                                    let selectClass = '';
                                    layui.$.each(selectData,function (i,v) {
                                        if(v.en==vvv.en){
                                            selectClass = 'selectClass';
                                            return false;
                                        }
                                    });
                                    htmlContent += '<div class="'+selectClass+'" style="border: 1px solid #d5d1d1;padding: 5px;margin: 0 15px 10px 0;" onclick="selectTag(this,\''+vvv.zh+'\',\''+vvv.en+'\')">'+vvv.zh+'('+vvv.en+')</div>';
                                });
                                htmlContent += '</div>';
                            })
                            htmlContent += '</div>';
                            k++;
                        })

                        $('.layui-tab-title').html(htmlUl);
                        $('.layui-tab-content').html(htmlContent);
                    },
                });
            });

            function selectTag($this,zh,en){
                let ishas = false;
                layui.$.each(selectData,function (i,v) {
                    if(v && v.en==en){
                        ishas = true;
                        selectData.splice(i,1);
                        layui.$($this).removeClass('selectClass');
                    }
                })
                if(ishas==false){
                    layui.$($this).addClass('selectClass');
                    selectData.push({"zh":zh,"en":en});
                }

                let html = '';
                let analyze_content = [];
                let prompt = [];
                layui.$.each(selectData,function (i,v) {
                    html +='<div class="selectClass" style="border: 1px solid #d5d1d1;padding: 5px;margin: 0 15px 10px 0;" onclick="selectTag(this,\''+v.zh+'\',\''+v.en+'\')">'+v.zh+'('+v.en+')</div>';
                    analyze_content.push(v.zh);
                    prompt.push(v.en);
                });
                layui.$('.selected_item').html(html);

                parent.$('input[name="analyze_content"]').val(analyze_content.join(','));
                parent.$('input[name="prompt"]').val(prompt.join(','));
                parent.$('input[name="select_tag"]').val(encodeURIComponent(JSON.stringify(selectData)));
                parent.selectTag = selectData;
                //console.log(selectData);
            }

            //提交事件
            layui.use(["form", "popup"], function () {
                // 字段验证允许为空
                layui.form.on("submit(save)", function (data) {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    return false;
                });
            });
        </script>

    </body>

</html>
